<template>
  <div class="container_report">
    <!-- 头部 -->
    <div class="header_report">
      <!-- 左边 -->
      <div class="header_right">
        <span class="right_text">{{ currentTime }}</span>

        <div class="ai_tabs">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="课程分析" :name="ENUMTABS.SINGLE"></el-tab-pane>
            <el-tab-pane label="课程对比" :name="ENUMTABS.CONTRAST"></el-tab-pane>
          </el-tabs>

          <span class="preview_report" @click="handlePreviewReport">预览报告</span>
        </div>
      </div>

      <!-- 中间 -->
      <span class="left_text">课堂AI分析面板</span>

      <!-- 右边 -->
      <div class="header_left">
        <Select v-if="activeName !== ENUMTABS.CONTRAST" ref="selectRef" :select-info="courseData.course_info" @search="getAIData" />
      </div>
    </div>

    <!-- 内容 -->
    <component @refresh="getAIData" :course-id="courseId" :is="activeName" :data-info="courseData" :comparision-data="courseData"></component>
  </div>
</template>
<script>
import SingleCourse from "./single-course.vue";
import CourseReport from "./course-report.vue";
import CourseComparison from "./course-comparison.vue";
import Select from "./select.vue";

const courseData = {
  course_info: {
    course_name: "语文", //类型：String  必有字段  备注：课程名
    course_time: "2024-02-21  15:00~15:40", //类型：String  必有字段  备注：上课时间
    video_time: "400", //类型：String  必有字段  备注：课程总时间（秒）
    sampling_interval: "10", //类型：String  必有字段  备注：采样间隔（秒）
    observation_time: "2024-02-21", //类型：String  必有字段  备注：观察时间(格式化上课时间日期)
    class_name: "1", //类型：String  必有字段  备注：班级名
    class_id: "1", //类型：String  必有字段  备注：班级id
    teacher_id: "2", //类型：String  必有字段  备注：教师id
    teacher_name: "刘德华", //类型：String  必有字段  备注：教师名
    subject_name: "文学", //类型：String  必有字段  备注：科目名
    subject_id: "1", //类型：String  必有字段  备注：科目id
    grade_id: "3", //类型：String  必有字段  备注：年级id
    grade_name: "三年级", //类型：String  必有字段  备注：年级
    play_url: "http://112.94.21.40:8808/public/hls/6/26/1080pv.m3u8", //类型：String  必有字段  备注：AI视频播放地址
    reality_num: "65", //类型：String  必有字段  备注：实到人数
    late_num: "1", //类型：String  必有字段  备注：迟到人数
    early_num: "0" //类型：String  必有字段  备注：早退人数
  },
  video_info_point: {
    question: [
      //类型：Array  必有字段  备注：提问时间（x轴为课堂时间区间）
      1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1
    ],
    interaction: [
      //类型：Array  必有字段  备注：互动时间（x轴为课堂时间区间）
      0, //类型：String  必有字段  备注：1：有，0：无
      1, //类型：String  必有字段  备注：无
      0, //类型：String  必有字段  备注：无
      0,
      0,
      0,
      0,
      0,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1
    ],
    practice: [
      //类型：Array  必有字段  备注：练习时间（x轴为课堂时间区间）
      0, //类型：String  必有字段  备注：1：有，0：无
      0, //类型：String  必有字段  备注：无
      0, //类型：String  必有字段  备注：无
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0,
      0
    ],
    concentrate: [
      //类型：Array  必有字段  备注：专注时间（x轴为课堂时间区间）
      1, //类型：String  必有字段  备注：1：有，0：无
      1, //类型：String  必有字段  备注：无
      1, //类型：String  必有字段  备注：无
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      0,
      0,
      0,
      0,
      0
    ],
    lazy: [
      //类型：Array  必有字段  备注：散漫时间（x轴为课堂时间区间）
      0, //类型：String  必有字段  备注：1：有，0：无
      1, //类型：String  必有字段  备注：无
      1, //类型：String  必有字段  备注：无
      1,
      1,
      1,
      1,
      1,
      1,
      0,
      0,
      0,
      0,
      0,
      0,
      0
    ]
  },
  reflect_info: "教学反思",
  suggest: {
    //类型：Object  必有字段  备注：所有结论、建议
    ai_suggest:
      "该堂课程从教学设计、课堂实施到学生参与度，均展现出了高水平的教学质量和有效的教学效果。  1、教师围绕教材内容，设计了一系列生动有趣且富有层次性的教学活动。通过情境创设、互动问答、小组合作等多种形式，引导学生深入理解和掌握课文知识点，", //类型：String  必有字段  备注：AI课堂建议
    behavior_conclusion: "学生的听讲行为、读写行为、举手行为占比低, 互动行为占比高。教师的走动授课、下讲台授课、板书授课占比低, 站立授课占比高。", //类型：String  必有字段  备注：教学行为分析结论
    behavior_suggest: "mock", //类型：String  必有字段  备注：教学行为分析建议
    course_score: "95", //类型：String  必有字段  备注：课堂得分
    rt_ch_type: "1", //类型：String  必有字段  备注：课堂模型（RT-CH取值得出）（1：讲授型，2：练习型，3：对话型，4：混合型）
    rt_ch_conclusion: "mock" //类型：String  必有字段  备注：课堂类型分析结论
  },
  time_allocation: {
    //类型：Object  必有字段  备注：课堂时间分配
    teacher_time: "210", //类型：String  必有字段  备注：教师授课时间（秒）
    teacher_time_per: "69.30%", //类型：String  必有字段  备注：教师授课时间占比
    student_time: "190", //类型：String  必有字段  备注：学生活动时间（秒）
    student_time_per: "30.7%", //类型：String  必有字段  备注：学生活动时间占比
    allocation_value: "", //类型：Array  必有字段  备注：课程分配时间图（x轴是视频时间，y轴是value）
    allocation_summarize:
      "该堂课程为对话型课堂，重点侧重与学生互动，教师的讲授时间和学生的互动时间分配较为合理，建议更加关注重点知识的深度挖掘，合理分配重点知识点的讲解时间和练习时间，并关注学生思维集中时间，在集中时间段内进行重点知识的讲解和分析，帮助学生提高知识吸收效率。" //类型：String  必有字段  备注：课程分配时间总结
  },
  focus: {
    //类型：Object  必有字段  备注：课堂专注度总结
    participation_rate: "71.2%", //类型：String  必有字段  备注：参与率
    head_up_rate: "78.3%", //类型：String  必有字段  备注：抬头率
    head_down_rate: "22.7%", //类型：String  必有字段  备注：低头率
    high_focus_rate: "65.2%", //类型：String  必有字段  备注：高专注率时间占比
    low_focus_rate: "78.3%" //类型：String  必有字段  备注：低专注率时间占比
  },
  st_value: {
    //类型：Object  必有字段  备注：课堂S-T曲线（x轴是key，y轴是value）
    1: 2, //类型：String  必有字段  备注：10
    2: 6, //类型：String  必有字段  备注：20
    3: 25,
    4: 35,
    5: 36,
    6: 36,
    7: 37,
    8: 39,
    9: 40,
    10: 63,
    11: 63,
    12: 63,
    13: 63,
    14: 66,
    15: 73,
    16: 74
  },
  rt_ch_value: {
    //类型：Object  必有字段  备注：RT-CH曲线
    rt: "0.10000000149011612", //类型：String  必有字段  备注：rt值
    ch: "0.1599999964237213" //类型：String  必有字段  备注：ch值
  },
  teacher_behavior: {
    // 教师行为分析
    teaching_behavior: {
      teach: ["1", "1", "0", "1", "1", "0", "1", "1", "0", "1", "1", "0", "1", "1", "0", "1", "1", "0", "1", "1", "0", "1", "1"],
      guidance: ["0", "0", "1", "0", "0", "1", "0", "0", "1", "0", "0", "1", "0", "0", "1", "0", "0", "1", "0", "0", "1", "1", "1"],
      blackboard: ["1", "1", "0", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "0", "0", "1", "0", "0", "1", "0", "0"],
      interaction: ["1", "1", "1", "0", "0", "1", "0", "0", "1", "0", "0", "1", "0", "0", "1", "0", "0", "1", "0", "0", "1", "1", "1"],
      tour: ["0", "0", "1", "0", "0", "1", "0", "1", "1", "0", "1", "1", "1", "0", "1", "0", "1", "1", "0", "0", "1", "1", "1"]
    },
    //教学行为统计时长
    teaching_behavior_duration: {
      teach_duration: "150", //类型：String  必有字段  备注：讲授时长（秒）
      interaction_duration: "190", //类型：String  必有字段  备注：互动时长（秒）
      guidance_duration: "200", //类型：String  必有字段  备注：指导时长（秒）
      blackboard_duration: "210"
    },

    teaching_trajectory: {
      //类型：Object  必有字段  备注：教师行为轨迹（固定x轴为1920，y轴为1080）
      x: [
        //类型：Array  必有字段  备注：x轴
        "10.0,", //类型：String  必有字段  备注：无
        "8.07", //类型：String  必有字段  备注：无
        "13.0", //类型：String  必有字段  备注：无
        "9.05",
        "11.0",
        "14.0",
        "13.4",
        "10.0",
        "14.0",
        "12.5",
        "9.15",
        "11.5",
        "3.03",
        "12.2",
        "2.02",
        "1.05",
        "4.05",
        "6.03",
        "12.0",
        "12.0",
        "7.08",
        "5.02"
      ],
      y: [
        //类型：Array  必有字段  备注：y轴
        "8.04", //类型：String  必有字段  备注：无
        "6.95", //类型：String  必有字段  备注：无
        "7.58", //类型：String  必有字段  备注：无
        "8.81",
        "8.33",
        "7.66",
        "6.81",
        "6.33",
        "8.96",
        "6.82",
        "7.2",
        "7.2",
        "4.23",
        "7.83",
        "4.47",
        "3.33",
        "4.96",
        "7.24",
        "6.26",
        "8.84",
        "5.82",
        "5.68"
      ]
    },

    teaching_trajectory_duration: {
      //类型：Object  必有字段  备注：教师行为轨迹统计时长
      podium: "400", //类型：String  必有字段  备注：讲台时长（秒）
      trajectory: "300", //类型：String  必有字段  备注：巡视时长（秒）
      trajectory_times: "9" //类型：String  必有字段  备注：巡视次数（次数）
    }
  },
  student_behavior: {
    studying_behavior: {
      listen: ["1", "1", "0", "1", "1", "0", "1", "1", "0", "1", "1", "0", "1", "1", "0", "1", "1", "0", "1", "1", "0", "1", "1"],
      practice: ["0", "0", "1", "0", "0", "1", "0", "0", "1", "0", "0", "1", "0", "0", "1", "0", "0", "1", "0", "0", "1", "1", "1"],
      demonstrate: ["1", "1", "0", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "0", "0", "1", "0", "0", "1", "0", "0"],
      read: ["1", "1", "1", "0", "0", "1", "0", "0", "1", "0", "0", "1", "0", "0", "1", "0", "0", "1", "0", "0", "1", "1", "1"],
      discuss: ["0", "0", "1", "0", "0", "1", "0", "1", "1", "0", "1", "1", "1", "0", "1", "0", "1", "1", "0", "0", "1", "1", "1"]
    },

    expression: {
      expression_value: [
        "3", //类型：String  必有字段  备注：0:'愤怒',1:'厌恶',2:'恐惧',3:'快乐',4:'中性',5:'悲伤',6:'惊喜'
        "3",
        "3",
        "3",
        "3",
        "3",
        "3",
        "1",
        "1",
        "1",
        "5",
        "5",
        "3",
        "3",
        "3",
        "2",
        "2",
        "2",
        "6",
        "6",
        "6",
        "6",
        "6",
        "6"
      ]
    },
    show: {
      //类型：Object  必有字段  备注：学生课堂表现（专注度）
      average: "88", //类型：String  必有字段  备注：学生专注度均值
      focus: [
        //类型：Array  必有字段  备注：注意力集中阶段
        "发生于【12min~13min】期间，平均专注度为24.1，持续时间为2min" //类型：String  必有字段  备注：描述
      ],
      slack: [
        //类型：Array  必有字段  备注：注意力涣散阶段
        "发生于【19min~21min】期间，平均专注度为12.6，持续时间为1min" //类型：String  必有字段  备注：无
      ],
      active: [
        //类型：Array  必有字段  备注：学生活跃度分析
        "发生于【16min~18min】期间学生情绪较兴奋", //类型：String  必有字段  备注：无
        "发生于【21min~23min】期间学生情绪较低落" //类型：String  必有字段  备注：无
      ],
      curve_value: [
        //类型：Array  必有字段  备注：学生专注度曲线（x轴为课堂时间区间）
        "20", //类型：String  必有字段  备注：专注度值
        "25", //类型：String  必有字段  备注：无
        "30" //类型：String  必有字段  备注：无
      ],
      curve_summarize:
        "该堂课程学生整体专注度较高，学生专注时间发生于【12min~13min】期间，平均专注度为24.1，持续时间为10min，学生散漫时间发生于【19min~21min】期间，平均专注度为12.6，持续时间为5min，建议教师重新审视教学计划和教学方案，回看相关课程视频，找到学生专注和散漫原因" //类型：String  必有字段  备注：学生专注度曲线总结
    }
  },
  student_actions: {
    //类型：Object  必有字段  备注：学生动作行为次数
    listening_count: "110", //类型：String  必有字段  备注：听讲次数（次）
    practice_count: "110", //类型：String  必有字段  备注：实践次数（次）
    demonstrate_count: "110", //类型：String  必有字段  备注：演示次数（次）
    read_count: "110", //类型：String  必有字段  备注：阅读次数（次）
    discuss_count: "110" //类型：String  必有字段  备注：讨论次数（次）
  },
  student_expressions: {
    //类型：Object  必有字段  备注：学生表情变化次数
    anger: "110", //类型：String  必有字段  备注：愤怒次数
    detest: "110", //类型：String  必有字段  备注：厌恶次数
    fear: "110", //类型：String  必有字段  备注：恐惧次数
    happy: "110", //类型：String  必有字段  备注：快乐次数
    neutral: "110", //类型：String  必有字段  备注：中性次数
    sad: "110", //类型：String  必有字段  备注：悲伤次数
    surprise: "110" //类型：String  必有字段  备注：惊喜次数
  },
  class_participation: "90%", //类型：String  必有字段  备注：平均课堂参与度

  watch_dimension: {
    //类型：Object  必有字段  备注：观察维度
    student_behavior_count: {
      //类型：Object  必有字段  备注：无
      listen_rate: "12%", //类型：String  必有字段  备注：听讲占比
      practice_rate: "12%", //类型：String  必有字段  备注：实践占比
      demonstrate_rate: "12%", //类型：String  必有字段  备注：演示占比
      read_rate: "12%", //类型：String  必有字段  备注：阅读占比
      discuss_rate: "12%" //类型：String  必有字段  备注：讨论占比
    },
    teacher_behavior_count: {
      //类型：Object  必有字段  备注：无
      teach_rate: "12%", //类型：String  必有字段  备注：教师讲授占比
      guidance_rate: "12%", //类型：String  必有字段  备注：指导学生占比
      blackboard_rate: "12%", //类型：String  必有字段  备注：书写板书占比
      interaction_rate: "12%", //类型：String  必有字段  备注：师生互动占比
      tour_rate: "12%" //类型：String  必有字段  备注：教室巡视占比
    }
  }
};

const ENUMTABS = {
  SINGLE: "single-course",
  CONTRAST: "course-comparison"
};

export default {
  data() {
    return {
      currentTime: "",
      ENUMTABS,
      activeName: "single-course",
      courseData: {},
      courseId: "" // 课程id
    };
  },

  components: {
    SingleCourse,
    CourseReport,
    CourseComparison,
    Select
  },

  methods: {
    handleClick() {
      const comparisionData = JSON.parse(localStorage.getItem("comparisionData"));
      console.info(comparisionData);
      if (comparisionData) {
        localStorage.removeItem("comparisionData");
      }
    },

    updateTime() {
      const updateClock = () => {
        const date = new Date();
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, "0");
        const day = String(date.getDate()).padStart(2, "0");
        const hours = String(date.getHours()).padStart(2, "0");
        const minutes = String(date.getMinutes()).padStart(2, "0");
        const seconds = String(date.getSeconds()).padStart(2, "0");
        this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        setTimeout(updateClock, 1000);
      };
      updateClock();
    },

    // 预览报告
    handlePreviewReport() {
      const url = this.activeName === ENUMTABS.CONTRAST ? "comparision-report" : "report";
      if (url === "comparision-report") {
        const comparisionData = JSON.parse(localStorage.getItem("comparisionData")) || {};
        if (!Object.keys(comparisionData).length) {
          return this.$message.error("请选择对比的课程");
        }
      }

      window.open(url);
      // const host_addr = sessionStorage.getItem("host_addr");
      // const report_url = host_addr + "ai-analysis/report";
      // window.open(report_url);
    },

    // 获取ai分析数据
    getAIData({ id }) {
      this.courseId = Number(id);
      const params = {
        course_id: String(id)
      };

      const success = (res) => {
        if (Object.prototype.toString.call(res.data) === "[object Object]") {
          this.courseData = res.data;
          localStorage.setItem("courseData", JSON.stringify(res.data));

          this.$nextTick(() => {
            this.$refs.selectRef.echoSelect();
          });
        }
      };
      this.$ajax.get("api/ainew/courseInfo", {
        params,
        func: { success }
      });
    }
  },

  created() {
    this.updateTime();

    if (this.$router.currentRoute.query && this.$router.currentRoute.query.id) {
      this.courseId = Number(this.$router.currentRoute.query.id);
      this.getAIData({ id: this.$router.currentRoute.query.id });
    }
  }
};
</script>
<style lang="scss" scoped>
.container_report {
  background-color: #122a54;
  width: 1912px;

  .header_report {
    padding: 0 20px;
    height: 69px;
    display: flex;
    justify-content: space-between;
    background: url("../../../../src/assets/images/ai/top.png") no-repeat 100%;
    // background-color: #011f39;

    .left_text {
      color: #fff;
      font-size: 32px;
      font-weight: bold;
      position: absolute;
      top: 25px;
      transform: translate(0, -50%);
      left: 845px;
    }

    .header_left {
      display: flex;
      align-items: center;
      margin-top: -10px;

      .header_select {
        margin: 0 10px;
      }
    }

    .header_right {
      display: flex;
      align-items: center;

      .right_text {
        color: #aae6f7;
        font-size: 20px;
      }

      .ai_tabs {
        margin-left: 70px;
        display: flex;

        .preview_report {
          cursor: pointer;
          margin-left: 25px;
          height: 32px;
          line-height: 32px;
          color: #d8f0ff;
          font-size: 14px;
          text-align: center;
          padding: 0 13px;
          background-color: #18296e;
          border-radius: 2px;
          border: 1px solid;
          border-image: linear-gradient(270deg, rgba(43, 246, 249, 0.5), rgba(30, 239, 245, 0), rgba(29, 239, 244, 0.09), rgba(19, 234, 241, 0.5)) 1 1;
        }

        /deep/ .el-tabs__nav-wrap {
          &::after {
            background-color: transparent !important;
          }
        }
        /deep/ .el-tabs__nav {
          .el-tabs__item {
            padding: 0 30px !important;
            font-size: 20px;
            color: #fff;

            &.is-active {
              font-weight: bold;
            }
          }
        }
      }
    }
  }

  .main_report {
    // background-color: #011f39;
    height: 100%;
    padding: 15px 25px;

    .single {
      .single_top {
        display: flex;

        .top_left {
          width: 50%;
          video {
            width: 100%;
            height: 350px;
            // background-color: #f2f2f2;
            margin-top: 10px;
          }
          .single_video_header {
            box-sizing: border-box;
            display: flex;
            width: 100%;
            margin-bottom: 30px;
            // background-color: #f2f2f2;
            color: #fff;

            .header_title {
              border-radius: 10px;
              padding: 10px;
              display: flex;
              flex-direction: column;
              font-size: 18px;
              font-weight: 500;
              justify-content: space-around;

              background: linear-gradient(270deg, rgba(1, 135, 191, 0.3) 0%, rgba(1, 135, 191, 0.11) 100%);

              .class_text {
                margin-bottom: 15px;
                font-size: 24px;
              }
              .teacher_text {
                margin-left: 15px;
              }
            }

            .box_container {
              display: flex;
              flex: 1;
              justify-content: space-around;

              .header_box {
                display: flex;
                border-radius: 10px;
                padding: 0 5px;
                background: linear-gradient(270deg, rgba(1, 135, 191, 0.3) 0%, rgba(1, 135, 191, 0) 100%);

                .img {
                  width: 100px;
                  height: 70px;
                }
                .box_tip {
                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;
                  align-items: center;

                  span {
                    font-size: 16px;
                  }
                  .box_sum {
                    font-size: 24px;
                    font-weight: 500;
                    margin-top: 10px;
                  }
                }
              }
            }
          }

          .left_echart {
            display: flex;
            position: relative;
            width: 100%;
            margin-top: 25px;

            .teacher_title {
              position: absolute;
              top: -5px;
              color: #fff;
              font-size: 20px;

              width: 100%;
              background: linear-gradient(90deg, rgba(21, 77, 160, 0.2) 0%, rgba(21, 77, 160, 0) 100%), linear-gradient(270deg, rgba(21, 77, 160, 0) 0%, rgba(21, 132, 185, 0.44) 100%);
              padding: 13px 0;
              padding-left: 20px;
            }

            .teacher_analysis {
              position: relative;
              flex: 1;
              border-left: 1px solid;
              border-image: linear-gradient(180deg, rgba(0, 212, 255, 0), rgba(0, 255, 253, 0.4), rgba(0, 233, 255, 0)) 1 1;
            }

            .teacher_trajectory {
              position: relative;
              width: 400px;

              border-right: 1px solid;
              border-image: linear-gradient(180deg, rgba(0, 212, 255, 0), rgba(0, 255, 253, 0.4), rgba(0, 233, 255, 0)) 1 1;
            }
          }
        }

        .top_right {
          width: 50%;
          box-sizing: border-box;
          margin-left: 10px;
          // background-color: #f2f2f2;
          padding: 5px 20px 0 15px;

          .right_header {
            display: flex;
            margin-bottom: 20px;

            .score {
              width: 170px;
              height: 170px;
            }

            .ai_text {
              color: #ccc;
              display: flex;
              flex-direction: column;
              margin-left: 10px;

              .text_bold {
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 12px;
              }

              .sug_text {
                font-size: 14px;
                margin-bottom: 10px;
                line-height: normal;
              }

              .summarize {
                height: 50px;
                padding: 3px;
                border-radius: 5px;
                width: 100%;
                border: 1px solid #6666665e;
                overflow: hidden;
                overflow-y: scroll;
                line-height: normal;
              }
            }
          }

          .test_ref {
            width: 800px;
            height: 600px;
          }
        }
      }

      .single_bottom {
        display: flex;
      }
    }
  }
}

.title {
  position: absolute;
  top: 60px;
  color: #ccc;
  font-size: 20px;
}

.analysis_data {
  display: flex;
  justify-content: space-around;

  .data_body {
    display: flex;
    flex-direction: column;
    color: #ccc;

    .data_title {
      display: flex;
      margin-bottom: 5px;
      align-items: center;

      .num {
        font-size: 20px;
        height: 20px;
        font-weight: bold;
      }
    }
  }
}

/deep/ .el-select {
  /** 修改输入框透明及选择完字体颜色更改*/
  .el-input {
    input {
      background-color: #122a54 !important;
      border: none !important;
      color: rgba(255, 255, 255, 0.5) !important;
    }
  }
}
</style>
